<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="../images/yc.png" type="image/x-icon">
<link rel="stylesheet" href="../css/layui.css"  media="all">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="../css/styles.css">
<style>
input {
border: 1px solid #ccc;
border-radius: 5px;
padding: 15px 15px;
height: 10px;
width: 400px;
font-size: 16px;
}
</style>
</head>
<body>
<br />
<!-- <div class="demoTable">
	<span class="navy_padding">姓名</span>
    <div class="layui-inline">
      <input class="layui-input" name="id"  autocomplete="on">
    </div>
   	<span class="navy_padding">手机号码</span>
    <div class="layui-input-inline">
       <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
	</div>
    <button type="button" class="layui-btn layui-btn-radius"> 查询  </button>
</div>
<table class="layui-hide" id="user_data" lay-filter="test"></table>
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" onclick="right(this)">同意申请</a>
</script>

<script type="text/html" id="checkboxTpl">
  <input type="checkbox" name="lock" value="{{d.id}}" title="冻结" lay-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }} onclick="left(this)">
</script> -->
<div id="app">
<input type="text" v-model="input" placeholder="请输入商品名称或编号">
</input><el-button icon="el-icon-search" circle  @click="search"></el-button>
<el-button @click="reset">重置</el-button>
		<el-table :data="shoper" border style="width: 100%"> 
			<el-table-column prop="sid" label="商家编号" width="100"></el-table-column> 
			<el-table-column prop="cname" label="公司名称" width="180"></el-table-column> 
			<el-table-column prop="addr" label="公司地址" width="100"> </el-table-column> 
			<el-table-column prop="person" label="担保人" width="180"> </el-table-column>
			<el-table-column prop="ptel" label="担保人电话" width="180"> </el-table-column>
			<el-table-column prop="sname" label="店铺名称" width="180"> </el-table-column>
			<el-table-column prop="stel" label="店铺电话" width="180"> </el-table-column>
			<el-table-column label="申请" width="180">
				<template v-slot = "scope">
					<el-button type="primary" icon="el-icon-edit" circle @click="viewDetail(scope.row.sid,scope.row.status)" >申请</el-button>
				</template>
			</el-table-column>
			<el-table-column label="操作"> 
				<template v-slot = "scope" >
    					<el-checkbox v-model="scope.row.pstatus" @change.native = "grounding(scope.row.pstatus, scope.row.sid)">冻结</el-checkbox>
				</template>
			</el-table-column>
		</el-table> 
		
		<div class="page text-right clearfix" style="margin-top: 40px" id="page">
			<a href="javascript:void(0)" @click="changePage(-1)">上一页</a>
			<a href="javascript:void(0)" class="select" @click="optionPage(1)">1</a>
			<a href="javascript:void(0)" v-for="index in totalPage" @click="optionPage(index + 1)">{{index + 1}}</a>
			<a href="javascript:void(0)" @click="changePage(1)">下一页</a>
		</div>
</div>
<script src="../js/layui.all.js" charset="utf-8"></script>
<script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript" src="../../js/show-dialog.js"></script>
<script type="text/javascript" src="../../js/axios.js"></script>
<script type="text/javascript" src="../../js/qs.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- <script>
layui.use('table', function(){
	var table = layui.table, form = layui.form;
	table.render({
    	elem: '#user_data',
		url:'../../shop/findList?page=1&limit=10',
		toolbar: '#toolbarDemo', // 开启头部工具栏，并为其绑定左侧模板
		defaultToolbar: [{
				title: '添加',
		    	layEvent: 'add',
		    	icon: 'layui-icon-add-1'
			}, 'filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
				title: '提示',
			    layEvent: 'LAYTABLE_TIPS',
			    icon: 'layui-icon-tips'
		}],
    	title: '管理员信息表',
    	cellMinWidth: 120,
    	id: "user_data",
	    cols: [[
	      {
			type: 'checkbox', fixed: 'center'},
	      	{field:'sid', title:'店家编号',fixed: 'center', unresize: true, sort: true, align: 'center'},
			{field:'cname', title:'店家名', align: 'center', edit: 'text'},
			/**{field:'email', title:'邮箱', align: 'center', edit: 'text', templet: function(res){
	        	return '<em>'+ res.email +'</em>'
	      	}},**/
	      	{field:'addr', title:'地址', align: 'center', sort: true},
			{field:'person', title:'担保人', align: 'center', sort: true},
			{field:'ptel', title:'电话号码', align: 'center'},
			{fixed: 'right', title:'操作', toolbar: '#barDemo', align: 'center'},
			{field:'statues', title:'是否冻结', width:110, templet: '#checkboxTpl', unresize: true}
	    ]],
		page: { 
			layout: ['prev', 'page', 'next', 'count', 'skip', 'limit'], //自定义分页布局
	      //,curr: 5 // 设定初始在第 5 页
	      groups: 10, // 只显示 1 个连续页码
	      first: '首页', //不显示首页
	      last: '尾页' //不显示尾页
	      
	    }
	});
	
	//监听锁定操作
	form.on('checkbox(lockDemo)', function(obj){
		layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
	});
  
	// 头工具栏事件
	table.on('toolbar(test)', function(obj){
    	switch(obj.event){
	    	case 'add':
	            layer.msg('添加');
	          	break;
		};
	});
  
	// 监听行工具事件
	table.on('tool', function(obj){
    	var data = obj.data;
    	if(obj.event === 'edit'){
      		layer.prompt({
        		formType: 3,
        		value: data.email
      		}, function(value, index){
				obj.update({
					email: value
        		});
        		layer.close(index);
      		});
		}
	});
});
function right(val){
	console.log("aaa",val);
}
</script> -->
<script type="text/javascript">
	let app = new Vue({
		el:'#app',
		data:{
			input: '',
			shoper:[],
			totalPage:1,
	        page: 1,
	        pageSize: 4,
		},
		methods:{
			search(){
				
			},
			reset() {//倒回第一页
				this.page = 1;
				$("#page a").removeClass("select");
				$("#page a").eq(1).addClass("select");
				this.findBackProducts();
				this.findBackProductsCount();
			},
			grounding(status, pno) {//修改状态 √
				if(status == true) {
					axios.post("../../shop/updateStatus", qs.stringify({sid: pno, sstatus: 0})).then(rt => {
						if(rt.data.code == 200) {
							this.shoper.forEach(item => {
								if(item.sid == pno) {
									item.pstatus = false;
								}
							});
							this.find();
							showmsg("解除冻结！", "green");
							return;
						}
					});
				}else {
					axios.post("../../shop/updateStatus", qs.stringify({sid: pno, sstatus: 3})).then(rt => {
						if(rt.data.code == 200) {
							this.shoper.forEach(item => {
								if(item.sid == pno) {
									item.pstatus = true;
								}
							});
							this.find();
							showmsg("成功冻结！", "green");
							return;
						}
					});
				}
			},
			viewDetail(val,status){
				if(status == 3){
					showmsg("已经被冻结了！！", "green");
					return;
				}
				axios.post("../../shop/updateStatus", qs.stringify({sid: val, sstatus: 1})).then(rt => {
					if(rt.data.code == 200) {
						showmsg("申请成功！", "green");
					}
				});
			},
			find(){
				axios.get("../../shop/findList?page=1&limit=10").then(rt =>{
					if(rt.data.count > 0){
						console.log("ggg");
						//this.shoper.push(rt.data.data);
						//this.shoper = [];
						rt.data.data.forEach((item,index) =>{
							this.shoper[index] = item;
							console.log(this.shoper[index]);
						})
						//this.shoper.shift();
						//this.shoper = rt.data.data;
						//this.totalPage = rt.data.count / this.pageSize;
						/**this.shoper.forEach(item => {
							if(item.status == 3) {
								item.pstatus = true;
							}else {
								item.pstatus = false;
							}
						});**/
						return;
					}
				})
			}
		},
		mounted(){
			this.find();
		}
	})
</script>
</body>
</html>